<template>
    <div id="main">

        <div class="east" style="width: 1200px;margin: 0 auto;">
            <div style="">
                <table border="0" cellspacing="" cellpadding="" class="list">
                    <thead>
                        <tr>
                            <th class="li1"></th>
                            <th class="li2"><span>商品</span></th>
                            <th class="li3"><span>单价</span></th>
                            <th class="li4"><span>数量</span></th>
                            <th class="li5"><span></span></th>
                            <th class="li6"><span>实付款</span></th>
                            <th class="li7"><span>交易状态</span></th>
                            <th class="li8"><span>交易操作</span></th>
                        </tr>
                    </thead>
                </table>
            </div>

            <div style="width:100%;height:auto !important;background: #f6f6f6;">
                <div id="itemContainer" style="background: #f6f6f6;">
                    <table border="0" cellspacing="" cellpadding="" class="list animated wobble" v-for="(item,index) in orderList" :key="index">
                        <tbody>
                            <tr class="order-info">
                                <td colspan="8">
                                    <span style="margin-left: 20px;">订单编号&nbsp;:&nbsp;</span><i class="order-num">{{ item.orders.id }}</i>
                                    <span style="margin-left: 40px;">下单时间&nbsp;:&nbsp;</span><i class="order-num">{{ item.orders.systime }}</i>
                                </td>
                            </tr>
                            <tr class="order" style="margin-bottom: 10px;">
                                <td class="li1" style="text-align: left;" colspan="4">
                                    <a><img :src="$baseUrl + item.goods.cover.slice(2)"></a>
                                    <div class="m-good-descript">
                                        <a>
                                            <p class="goods-descript">{{ item.goods.name }}</p>
                                        </a>
                                    </div>
                                    <div class="li3"><span>￥{{ item.goods.price }}</span></div>
                                    <div class="li4"><span>{{ item.orders.amount }}</span></div>
                                    <div class="li5"></div>
                                </td>
                                <td class="li6" rowspan="0">
                                    <div>
                                        <p class="total-money">￥{{ item.orders.total }}</p>
                                    </div>
                                </td>
                                <td class="li7" rowspan="0">
                                    <div>
                                        <span>已付款 (微信)</span>
                                    </div>
                                </td>
                                <td class="li8" rowspan="0">
                                    <div>
                                        <p>

                                        </p>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- <div class='holder'>
                <a class='jp-current'>1</a>
                <a title='第2页' href='order?page=2'>2</a>
                <a href='order?page=2'>下页</a>
                <a href='order?page=2'>尾页</a>
            </div> -->
        </div>

    </div>
</template>

<script>
import { getOrdersByUserId } from '@/request/order.js'
export default {
    name: 'order',

    data() {
        return {
            orderList:[]
        };
    },

    mounted() {
        getOrdersByUserId(JSON.parse(localStorage.getItem('user')).id).then(res=>{
            console.log(res.data);
            this.orderList = res.data
        })
    },

    methods: {

    },
};
</script>

<style scoped>
@import url('@/assets/css/order.css')
</style>